前言

由於經手的專案中經常有機會使用Angular框架，過程中累積了一些前端專案的開發心得，想在此跟大家做個整理與分享。

本次從一個新專案的檔案結構開始介紹，利用官網的範例專案搭配自己常用的前端開發工具帶大家了解Angular專案基本的開發流程，包含選用樣式框架，自動註解工具與假資料開發流程介紹等等。

由於Angular的定位是前端開發框架，所以包含許多不常在實際開發專案時會使用到的功能或比較進階的功能，在此不會特別介紹，有興趣的人可以自行到官網搜尋教學與範例。

Angular官網 文件非常完整也有stackblitz動態範例，完整使用教學可到官網查找。

參賽動機

1. 做為Angular框架的構建手冊，方便以後知識點查閱。
2. 在開源社群取得許多幫助，也希望能回饋社群。
3. 為多年來使用Angular框架做技術總結。

作業環境

• Windows
• VSCode
• Chrome
• nodejs 16.15.1
• npm 8.11.0
• @angular/cli 14.0.7

開發專案預計會介紹的項目

開發前

1. 開發前先設定好format與lint可以讓專案時常保持易讀好維護的狀態。
2. compodoc是一套適用於Angular框架的自動註解工具，養成寫註解的習慣。
3. 挑一個樣式框架搭配Angular做出漂亮的元件。

開發中

1. Angular建立元件指令或服務等基本操作。
2. 使用前端假資料開發流程實現前後端同時開發。
3. 自訂的SCSS與i18n多國語系資料夾配置。

開發後(非TDD開發流程)

1. Angular自帶的Jasmine框架做單元測試。
2. Angular搭配Cypress框架做E2E測試。
3. 用Gitlab流程跑一下CI/CD。

下一章將會討論一下Angular框架的特性與什麼樣的專案比較適合用Angular來實作。

文中透過實現一些需求範例，我們完成了 my-app 專案中的一些基本開發需求，最終的範例成果可在 範例練習 Github 中找到，也可以到 範例練習 Stackblitz 實際演練。